<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        width: 100%;
    }

    #box2 {
        width: 400px;
        height: 400px;
        background: #fff;
        position: absolute;
        left: 630px;
        top: 100px;
        text-align: center;
        display: none;
    }

    input {
        margin-left: 0px;
    }

    p {
        padding-left: 250px;
    }
</style>

<body>
    <button id="btn" style="background:blue;">提交</button>
    <table>
        <thead>
            <tr>
                <td>ID</td>
                <td>留言人</td>
                <td>标题</td>
                <td>内容</td>
                <td>时间</td>
                <td>操作

                </td>

            </tr>
        </thead>
        <tbody id="tble">


        </tbody>

    </table>
    <div id="box2">
        <h1>发布留言</h1>
        <hr>
        留言人<br>
        <input type="text" id="inp2"><br>
        留言标题:<br>
        <input type="text" id="inp1"><br>

        留言内容<br>
        <input type="text" id="inp3"><br>
        <hr>
        <button id="sh">关闭</button>&emsp;<button id="fa">发布</button>
    </div>
</body>
<script>
    btn.onclick = function () {
        box2.style = "display:block"
        sh.onclick = function () {
            box2.style = "display:none"
        }
    }
    fa.onclick = function () {
        var r = document.getElementById('box2')
        var input1 = inp1.value
        var input2 = inp2.value
        var input3 = inp3.value
        if (input1 == '' || input2 == '' || input3 == '') {
            alert('不能为空')
            return
        }
        var san = new XMLHttpRequest()
        san.open('POST', 'https://liu.zzgoodqc.cn/lyb/add')
        san.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        san.onreadystatechange = function () {
            if (san.readyState == 4 && san.status == 200) {
                var aa = JSON.parse(san.responseText)
                console.log(aa);
                if (aa.code == 200) {
                    alert('成功')
                    location.reload()
                } else {
                    alert('失败')

                }
            }
        }
        san.send(`title=${input1}&content=${input2}&name=${input3}`)
    }
    var n = new XMLHttpRequest()
    n.onreadystatechange = function () {
        if (n.readyState == 4 && n.status == 200) {
            var oo = JSON.parse(n.responseText)
            if (oo.code == 200) {
                var d = ''
                for (let f in oo.data) {
                    d += `<tr>
                        <td>${oo.data[f].id}</td>
                        <td>${oo.data[f].content}</td>
                        <td>${oo.data[f].title}</td>
                        <td>${oo.data[f].name}</td>
                        <td>${oo.data[f].updated_at}</td>
                        <td><button name = 'del' onclick="shanchu" >删除</button></td>
                        </tr>`
                }
                document.getElementsByTagName('tbody')[0].innerHTML += d
            }
        }
    }
    n.open('GET', 'https://liu.zzgoodqc.cn/lyb', true)
    n.send()
    var shanchu = document.getElementById("shanchu")
    tble.onclick = function (h) {
        var data = ''
        console.log(1222);
        if (confirm(data === true)) {
            var ID =h.target.parentNode.parentNode.firstElementChild.innerHTML
            var this_tr =h.target.parentNode.parentNodetb
            var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr);
                    var res = JSON.parse(xhr.responseText)
                    console.log(res);
                }
            }
            xhr.open('GET', `https://liu.zzgoodqc.cn/del/${ID}`, true)
            xhr.send()
            location.reload()
        }else{
            return
        }
    }
</script>

</html>